<template>
	<view class="register">
		<u-toast ref="uToast"></u-toast>
		<view class="register_title">用户注册</view>
		<u--form labelWidth='60' labelPosition="left" :model="model" :rules="rules" ref="form">
			<u-form-item label="用户名" prop="username" borderBottom>
				<u--input v-model="model.username" border="none"></u--input>
			</u-form-item>
			<u-form-item label="手机号" prop="phone" borderBottom>
				<u--input v-model="model.phone" border="none"></u--input>
			</u-form-item>
			<u-form-item label="密码" prop="password" borderBottom>
				<u--input v-model="model.password" type='password' border="none"></u--input>
			</u-form-item>
		</u--form>
		<u-button type="error" @click='registerFn' text="注册"></u-button>
		<text @click="toLogin">已有账号？前往登录</text>

	</view>
</template>

<script>
	import {
		registerAPI
	} from '@/api/api.js'
	export default {
		data() {
			return {
				model: {
					username: '',
					password: '',
					phone: ''
				},
				rules: {
					'phone': {
						type: 'string',
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					},
					'username': {
						type: 'string',
						required: true,
						message: '请输入用户名',
						trigger: ['blur', 'change']
					},
					'password': {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}
				},
			}
		},
		methods: {
			toLogin() {
				uni.navigateTo({
					url: '/pages/Login/Login'
				})
			},
			registerFn() {
				this.$refs.form.validate().then(async () => {
					const res = await registerAPI(this.model)
					if (res.status === 200) {
						this.$refs.uToast.show({
							type: 'success',
							message: "用户注册成功！",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
						})
						this.model.username=''
						this.model.phone=''
						this.model.password=''
						uni.navigateTo({
							url:'/pages/Login/Login'
						})
					} else {
						this.$refs.uToast.show({
							type: 'error',
							message: "用户注册失败！",
						})
					}
				}).catch(errors => {
					uni.$u.toast('请填写正确的注册信息！')
					console.log(errors)
				})
			}
		}
	}
</script>

<style scoped>
	.register_title {
		width: 650rpx;
		text-align: center;
		font-size: 50rpx;
		font-weight: bolder;
		color: orangered;
		margin-bottom: 30rpx;
	}

	.register {
		width: 650rpx;
		height: 400rpx;
		margin: 200rpx auto;
	}

	.register>text {
		text-decoration: underline;
		color: yellowgreen;
	}

	.register>button {
		margin: 20rpx 0;
	}
</style>
